<?php

/* @var $this \yii\web\View */

use yii\helpers\Html;
use app\assets\QuillEditorAsset;
use app\assets\EventSourceAsset;

QuillEditorAsset::register($this);
EventSourceAsset::register($this);
?>
<?= $this->render('permission') ?>
<script type="text/x-template" id="notify-template">
    <div>
        <v-snackbar
                v-model="orderSnackOpen"
                app
                light
        >
            <v-container>
                <div class="d-flex">
                    <v-img :src="orderSnackbarIcon" max-width="60"></v-img>
                    <div class="ml-2">
                        <div class="text-subtitle-2">
                            {{ orderSnackbarTitle }}
                        </div>
                        <div class="text-body-2">
                            {{ orderSnackbarText }}
                        </div>
                    </div>
                </div>
            </v-container>


            <template v-slot:action="{ attrs }">
                <v-btn
                        color="blue"
                        text
                        v-bind="attrs"
                        @click="onOrderNotifyClick"
                >
                    查看
                </v-btn>
                <v-btn
                        color="blue"
                        text
                        v-bind="attrs"
                        @click="orderSnackOpen = false"
                >
                    关闭
                </v-btn>
            </template>
        </v-snackbar>
    </div>
</script>
<script>
    // 定义一个名为 share-dialog 的新组件
    Vue.component('notify', {
        data: function () {
            return {
                orderSnackOpen: false,
                orderSnackbarIcon: '',
                orderSnackbarTitle: '',
                orderSnackbarText: '',
                orderObj: null,
            };
        },
        mounted() {
            Notification.requestPermission(function (status) {
                // 这将使我们能在 Chrome/Safari 中使用 Notification.permission
                if (Notification.permission !== status) {
                    Notification.permission = status;
                }
            });

            let admin = this.$local_load_user();

            if(admin){

                // const EventSource =  EventSourcePolyfill;
                //
                // let source = new EventSource("/adminapi/sale_rcd/order_event?admin_id=" + admin.id);
                // let vue = this;
                // source.onmessage = function (event) {
                // };
                // source.onerror = function (error) {
                // };
                //
                // source.addEventListener('new_order', function (event) {
                //     vue.orderObj = JSON.parse(event.data);
                //     vue.orderSnackbarTitle = '有待处理的新订单';
                //     vue.orderSnackbarIcon = vue.orderObj.product.first_pic;
                //     vue.orderSnackbarText = vue.orderObj.order.product_name + '(' + vue.orderObj.order.price_title + ')'
                //     vue.orderSnackOpen = true;
                //     let n = new Notification(vue.orderSnackbarTitle, {
                //         icon: vue.orderSnackbarIcon,
                //         body: vue.orderSnackbarText
                //     });
                //
                //     n.onclick = function (event) {
                //         event.preventDefault(); // prevent the browser from focusing the Notification's tab
                //         vue.onOrderNotifyClick();
                //     }
                // });
            }
        },
        methods: {
            onOrderNotifyClick() {
                let vue = this;
                window.open('/admin1/' + vue.orderObj.order.model_name + '/details?id=' + vue.orderObj.order.id, '_blank');
            }
        },
        template: '#notify-template'
    })
</script>
